import React from 'react';
import axios from 'axios';
import { BackTop } from 'antd';


class Detail extends React.Component{
    constructor(props){
        super(props);
        this.state={
            content:[]
        }
        this.createMarkup=this.createMarkup.bind(this);
        this.getData=this.getData.bind(this);
    }
    createMarkup(){   //渲染html代码
       return{__html: this.state.content.content}
    }
    componentWillMount(){ //渲染之前请求数据
        
      this.getData();
   }
    getData(){
        //获取url传过来的aid
        var aid=this.props.params.aid;
        var that=this;
        var url='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid;
        axios.get(url)
        .then(function (response) {
            that.setState({
                content:response.data.result[0]
            })
        })
        .catch(function (error) {
            console.log(error);
        });
    }
    render(){
        return(
            <div className="details">
               <h2>{this.state.content.title}</h2>
                <div className="content">
                    <div dangerouslySetInnerHTML={this.createMarkup()} />
                </div>
                <BackTop />
    Scroll down to see the bottom-right
    <strong style={{ color: 'rgba(64, 64, 64, 0.6)' }}> gray </strong>
    button.
            </div>
        )
    }
}


export default Detail;